 /*
 * @description: 自定义红包组件
 * @Author: along
 * @Date: 2021-05-07
 * @Last Modified by: along
 * @Last Modified time: 2021-05-08
 */
<template>
    <div
        class="customCouponList"
        @click="emitEvent(107)"
    >
        <!-- 有数据 -->
        <div
            v-if="couponShowData.length > 0"
            class="slider"
            :style="{backgroundColor: baseconfig.style.backgroundColor}"
        >
            <!-- 大图模式 -->
            <div
                v-if="baseconfig.style.coupon_array == 0"
                data-text="大图样式"
            >
                <div
                    v-for="(row,index) in couponShowData"
                    :key="index"
                    class="__coupon"
                >
                    <!-- 已上传图片 -->
                    <template v-if="row.cover_image">
                        <div class="__coupon_items">
                            <img
                                :src="row.cover_image"
                                :style="{width: `${375 - baseconfig.style.marginH * 2}px`, margin: `${baseconfig.style.marginV}px 0`}"
                            >
                            <!-- 优惠券图标 -->
                            <template v-if="baseconfig.style.is_preview_icon">
                                <i
                                    class="iconfont el-icon-hand-yilingqu1"
                                    :style="{
                                        color: baseconfig.style.iconColor,
                                        position: 'absolute',
                                        left: baseconfig.style.iconLeft + 'px',
                                        top: baseconfig.style.iconTop + 'px',
                                        fontSize: baseconfig.style.iconFontSize + 'px'
                                    }"
                                />
                            </template>
                        </div>
                    </template>
                    <!-- 未上传图片 -->
                    <template v-if="!row.cover_image">
                        <div
                            class="__coupon_default"
                            :style="{
                                width: `${375 - baseconfig.style.marginH * 2}px`,
                                height: '120px',
                                margin: `${baseconfig.style.marginV}px 0`,
                                background: '#F95B56'
                            }"
                        />
                    </template>
                </div>
            </div>

            <!-- 一行两个 -->
            <div
                v-if="baseconfig.style.coupon_array == 1"
                data-text="一行两个"
                class="__coupon_secend"
            >
                <div
                    v-for="(row,index) in couponShowData"
                    :key="index"
                    :style="{
                        marginLeft: baseconfig.style.marginH / 2 + 'px',
                        merginTop: baseconfig.style.marginV / 2 + 'px'
                    }"
                >
                    <!-- 已上传图片 -->
                    <template v-if="row.cover_image">
                        <div class="__coupon_items">
                            <img
                                :src="row.cover_image"
                                :style="{
                                    width: `${(375 - (baseconfig.style.marginH / 2) * 3) / 2}px`,
                                    margin: `${baseconfig.style.marginV}px 0`
                                }"
                            >
                            <!-- 优惠券图标 -->
                            <template v-if="baseconfig.style.is_preview_icon">
                                <i
                                    class="iconfont el-icon-hand-yilingqu1"
                                    :style="{
                                        color: baseconfig.style.iconColor,
                                        position: 'absolute',
                                        left: baseconfig.style.iconLeft + 'px',
                                        top: baseconfig.style.iconTop + 'px',
                                        fontSize: baseconfig.style.iconFontSize + 'px'
                                    }"
                                />
                            </template>
                        </div>
                    </template>
                    <!-- 未上传图片 -->
                    <template v-if="!row.cover_image">
                        <div
                            :style="{
                                width: `${(375 - (baseconfig.style.marginH / 2) * 3) / 2}px`,
                                height: '120px',
                                margin: `${baseconfig.style.marginV}px 0`,
                                background: '#F95B56'
                            }"
                        />
                    </template>
                </div>
            </div>

            <!-- 一行三个 -->
            <div
                v-if="baseconfig.style.coupon_array == 2"
                data-text="一行三个"
                class="__coupon_secend"
            >
                <div
                    v-for="(row,index) in couponShowData"
                    :key="index"
                    :style="{
                        marginLeft: baseconfig.style.marginH / 2 + 'px',
                        merginTop: baseconfig.style.marginV / 2 + 'px'
                    }"
                >
                    <!-- 已上传图片 -->
                    <template v-if="row.cover_image">
                        <div class="__coupon_items">
                            <img
                                :src="row.cover_image"
                                :style="{
                                    width: `${(375 - (baseconfig.style.marginH / 2) * 4) / 3}px`,
                                    margin: `${baseconfig.style.marginV}px 0`
                                }"
                            >
                            <!-- 优惠券图标 -->
                            <template v-if="baseconfig.style.is_preview_icon">
                                <i
                                    class="iconfont el-icon-hand-yilingqu1"
                                    :style="{
                                        color: baseconfig.style.iconColor,
                                        position: 'absolute',
                                        left: baseconfig.style.iconLeft + 'px',
                                        top: baseconfig.style.iconTop + 'px',
                                        fontSize: baseconfig.style.iconFontSize + 'px'
                                    }"
                                />
                            </template>
                        </div>
                    </template>
                    <!-- 未上传图片 -->
                    <template v-if="!row.cover_image">
                        <div
                            :style="{
                                width: `${(375 - (baseconfig.style.marginH / 2) * 4) / 3}px`,
                                height: '120px',
                                margin: `${baseconfig.style.marginV}px 0`,
                                background: '#F95B56'
                            }"
                        />
                    </template>
                </div>
            </div>

            <!-- 一行四个 -->
            <div
                v-if="baseconfig.style.coupon_array == 3"
                data-text="一行四个"
                class="__coupon_secend"
            >
                <div
                    v-for="(row,index) in couponShowData"
                    :key="index"
                    :style="{
                        marginLeft: baseconfig.style.marginH / 2 + 'px',
                        merginTop: baseconfig.style.marginV / 2 + 'px'
                    }"
                >
                    <!-- 已上传图片 -->
                    <template v-if="row.cover_image">
                        <div class="__coupon_items">
                            <img
                                :src="row.cover_image"
                                :style="{
                                    width: `${(375 - (baseconfig.style.marginH / 2) * 5) / 4}px`,
                                    margin: `${baseconfig.style.marginV}px 0`
                                }"
                            >
                            <!-- 优惠券图标 -->
                            <template v-if="baseconfig.style.is_preview_icon">
                                <i
                                    class="iconfont el-icon-hand-yilingqu1"
                                    :style="{
                                        color: baseconfig.style.iconColor,
                                        position: 'absolute',
                                        left: baseconfig.style.iconLeft + 'px',
                                        top: baseconfig.style.iconTop + 'px',
                                        fontSize: baseconfig.style.iconFontSize + 'px'
                                    }"
                                />
                            </template>
                        </div>
                    </template>
                    <!-- 未上传图片 -->
                    <template v-if="!row.cover_image">
                        <div
                            :style="{
                                width: `${(375 - (baseconfig.style.marginH / 2) * 5) / 4}px`,
                                height: '120px',
                                margin: `${baseconfig.style.marginV}px 0`,
                                background: '#F95B56'
                            }"
                        />
                    </template>
                </div>
            </div>

            <!-- 横向滑动 -->
            <div
                v-if="baseconfig.style.coupon_array == 4"
                data-text="横向滑动"
                class="__coupon_herion"
            >
                <div
                    v-for="(row,index) in couponShowData"
                    :key="index"
                    :style="{
                        marginLeft: baseconfig.style.marginH / 2 + 'px',
                        merginTop: baseconfig.style.marginV / 2 + 'px'
                    }"
                >
                    <!-- 已上传图片 -->
                    <template v-if="row.cover_image">
                        <div class="__coupon_items">
                            <img
                                :src="row.cover_image"
                                :style="{
                                    width: `${baseconfig.style.coupon_width}px`,
                                    margin: `${baseconfig.style.marginV}px 0`
                                }"
                            >
                            <!-- 优惠券图标 -->
                            <template v-if="baseconfig.style.is_preview_icon">
                                <i
                                    class="iconfont el-icon-hand-yilingqu1"
                                    :style="{
                                        color: baseconfig.style.iconColor,
                                        position: 'absolute',
                                        left: baseconfig.style.iconLeft + 'px',
                                        top: baseconfig.style.iconTop + 'px',
                                        fontSize: baseconfig.style.iconFontSize + 'px'
                                    }"
                                />
                            </template>
                        </div>
                    </template>
                    <!-- 未上传图片 -->
                    <template v-if="!row.cover_image">
                        <div
                            :style="{
                                width: `${baseconfig.style.coupon_width}px`,
                                height: '120px',
                                margin: `${baseconfig.style.marginV}px 0`,
                                background: '#F95B56'
                            }"
                        />
                    </template>
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <div v-if="!couponShowData.length">
            <img
                src="@/assets/image/packet-no.png"
                class="cate-none-image"
            >
        </div>
    </div>
</template>

<script>
export default {
    name: 'CustomCouponList',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            isLoad: false,
            couponShowData: []
        };
    },
    watch: {
        baseconfig:  {
            handler: function (val, oldVal) {
                this.getList();
                // console.log('监听数据修改', val);
            },
            deep: true
        }
    },
    filters: {},
    mounted () {
        this.isLoad = true;
        this.getList();
    },
    methods: {
        /**
         * @ 获取优惠券
         */
        getList () {
            if(!this.baseconfig.data.packet_list.length) {
                this.couponShowData = [];
                return false;
            }

            // console.log('------', this.baseconfig.data.packet_list);
            let packet_list = [];

            packet_list = this.baseconfig.data.packet_list.reduce((cur,next) => {
                if(next.packet_no && next.cover_image) {
                    cur.push({
                        packet_no: next.packet_no,
                        cover_image: next.cover_image
                    });
                    return cur;
                }
            }, []);

            this.couponShowData = this.baseconfig.data.packet_list;

            if(!packet_list) return false;

            if(packet_list.length && packet_list.length === this.baseconfig.data.packet_list.length) {
                this.$post('/student/custom_page%5Cget_data_for_app_show', {
                    type: 107,
                    data_json: JSON.stringify({
                        packet_list: packet_list,
                        hide_invalid: this.baseconfig.data.hide_invalid
                    })
                }, resp => {
                    if(resp.code == 1){
                        this.couponShowData = resp.data.data.packet_list;
                    }
                });
            }
        },

        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.customCouponList {
    width: 375px;
    box-sizing: border-box;
    border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    // height: 190px;
    //无数据
    .cate-none-image {
        width: 355px;
        height: 170px;
        margin: 10px 0;
    }
    .__coupon {
        width: 375px;
        display: flex;
        justify-content: center;
    }
    .__coupon_items {
        position: relative;
        overflow: hidden;
    }
    .__coupon_secend {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        width: 375px;
    }
    .__coupon_herion {
        display: flex;
        width: 375px;
        overflow: hidden;
        overflow-x: auto;
        &::-webkit-scrollbar {
            width: 2px;
            height: 2px;
        }
    }
}
</style>
<style lang="less">
.customCouponList {
    .el-carousel__arrow--right, .el-carousel__arrow--left {
        display: none !important;
    }
    .el-carousel__button {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
}
</style>